import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, CounterState } from '@/features/counter/counterSlice';
import { Button } from 'antd';

const Home: React.FC = () => {
  const count = useSelector((state: { counter: CounterState }) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <h3>这个是redux的例子：</h3>
      <div style={{ display: 'flex' }}>
        <Button aria-label="Increment value" onClick={() => dispatch(increment())}>
          Increment
        </Button>
        <div style={{ minWidth: '20px', lineHeight: '30px', textAlign: 'center' }}>{count}</div>
        <Button aria-label="Decrement value" onClick={() => dispatch(decrement())}>
          Decrement
        </Button>
      </div>
    </div>
  );
};
export default Home;
